<template>
  <div class="my-collapse">
    <el-collapse-transition>
      <div v-show="show" class="content">
        <slot></slot>
      </div>
    </el-collapse-transition>
    <div class="btn" @click="showHide()">
      <span v-show="!show">
        <span class="tip-text">{{btnOpenText?btnOpenText:'展开'}}</span>
        <i class="el-icon-caret-bottom"></i>
      </span>
      <span v-show="show">
        <span class="tip-text">{{btnCloseText?btnCloseText:'关闭'}}</span>
        <i class="el-icon-caret-top"></i>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "my-collapse",
  props: [
    "btn-open-text",
    "btn-close-text",
    "handleClick",
    "param",
    "myopen",
    "myclose"
  ],
  data: function() {
    return {
      show: false
    };
  },
  methods: {
    //点击事件
    showHide(x) {
      this.show = !this.show;
      this.handleClick(this.param); //执行父级传过来的函数

      if (this.show) this.myopen();
      else this.myclose()
    }
  }
};
</script>

<style lang="scss" scoped>
.my-collapse {
  .content {
    //background: #fafafa;
  }
  .btn {
    color: #c0c4cc;
    cursor: pointer;
    text-align: center;
    line-height: 40px;
    border-top: 0px;
    margin: 10px 0 0 0;

    &:hover {
      color: #409eff;
      background: #f9fafc;
    }
  }
}
</style>